<template>
  <!-- 搜索 -->
  <el-form inline :model="formdata1">
    <el-form-item label="名字" prop="searchValue">
      <el-input v-model="formdata1.searchValue" placeholder="请输入要输入内容" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getlist">搜索</el-button>
    </el-form-item>
  </el-form>
  <!-- 新增 -->
  <button @click="add">新增</button>
  <!-- 表格 -->
  <el-table :data="tableData.data" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="shopName" label="Name" width="180" />
    <el-table-column label="图片">
      <template #default="{ row }">
        <img :src="row.shopImage" alt="" width="100" height="100" />
      </template>
    </el-table-column>
    <el-table-column prop="shopAddress" label="Address" />
    <el-table-column prop="shopType" label="shopType" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row)"> 编辑 </el-button>
        <el-button size="small" type="danger" @click="del(scope.row.id)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="handleClose">
    <el-form :model="tionData">
      <el-form-item label="店铺名字" prop="shopName">
        <el-input v-model="tionData.shopName" placeholder="请输入店铺名字"></el-input>
      </el-form-item>
      <el-form-item label="店铺地址" prop="shopAddress">
        <el-input v-model="tionData.shopAddress" placeholder="请输入店铺地址"></el-input>
      </el-form-item>
      <el-form-item label="店铺电话号" prop="shopTel">
        <el-input v-model="tionData.shopTel" placeholder="请输入店铺电话号"></el-input>
      </el-form-item>
      <el-form-item label="店铺图片" prop="shopImage">
        <el-input v-model="tionData.shopImage" placeholder="请输入店铺图片"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import axios from 'axios'
import { reactive, ref, onMounted } from 'vue'
const tableData = reactive({
  data: [],
})
onMounted(() => {
  getlist()
})
const getlist = async () => {
  const res = await axios.get('/api/list', {
    params: {
      ...formdata1.value,
    },
  })
  console.log(res.data.data.data)
  tableData.data = res.data.data.data
}
getlist()
// 搜索
const formdata1 = ref({
  searchValue: '',
})
//删除
const del = async (id: number) => {
  alert('确定删除吗？')
  await axios.delete('/api/list?id=' + id)
  getlist()
}

const tionData = ref({
  shopName: '',
  shopAddress: '',
  shopTel: '',
  shopImage: '',
})

//新增
const dialogVisible = ref(false)
const title = ref('')
const add = () => {
  dialogVisible.value = true
  title.value = '新增'
  tionData.value = {
    shopName: '',
    shopAddress: '',
    shopTel: '',
    shopImage: '',
  }
}
//编辑
const edit = (row: any) => {
  dialogVisible.value = true
  title.value = '编辑'
  tionData.value = row
}
//提交
const submit = async () => {
  if (title.value == '新增') {
    await axios.put('/api/list', tionData.value)
  } else {
    await axios.post('/api/list', tionData.value)
  }
  getlist()
  dialogVisible.value = false
}
</script>

<style lang="scss">
</style>